<template>
    <div class="search">
        <div class="search-obj">
            <div class="title">机构名称:</div> <el-input v-model="orgName" style="width: 300px" placeholder="机构名称"
                disabled />
        </div>
        <div class="search-obj">
            <div class="title"> 进件团队:</div> <el-select v-model="channel" placeholder="进件团队" style="width: 300px"
                clearable>
                <el-option v-for="item in channelList" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" clearable />
            </el-select>
        </div>
        <div class="search-obj-other">
            <div class="title">变量字段:</div>
            <el-select v-model="value2" placeholder="变量字段" style="width: 800px" clearable multiple>
                <template #label="{ label }">
                    <span>{{ label }} </span>
                    <span style="font-weight: bold">{{ value }}</span>
                </template>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>


    </div>
    <div class="submit">
        <el-button color="rgba(200, 16, 46, 100)">生成</el-button>
        <el-button color="rgb(220,220,220)" @click="clearable">重置</el-button>
    </div>
    <el-divider border-style="double" />
    <div class="container">
        <div class="table">
            <el-table :data="table" style="width: 100%; color: black;" border stripe
                :header-cell-style="tableHeaderStyle" scrollbar-always-on="true">
                <el-table-column prop="变量字段" label="变量字段" min-width="150" align="center" />
                <el-table-column prop="徐州某力" label="徐州某力" min-width="100" align="center" />
                <el-table-column prop="苏州某发" label="苏州某发" min-width="80" align="center" />
                <el-table-column prop="马鞍山某达" label="马鞍山某达" min-width="80" align="center" />
                <el-table-column prop="合肥某鑫" label="合肥某鑫" min-width="80" align="center" />
                <el-table-column prop="南京某漫" label="南京某漫" min-width="80" align="center" />
                <el-table-column prop="无锡某万" label="无锡某万" min-width="80" align="center" />
                <el-table-column prop="常州某车" label="常州某车" min-width="80" align="center" />
                <el-table-column prop="蚌埠某多" label="蚌埠某多" min-width="80" align="center" />
            </el-table>
        </div>
        <el-image style="width: 800px; height: 700px" :src="image" :fit="fit" />
    </div>

</template>
<script setup>
import { ref } from 'vue'
import image from '@/assets/7c455b4828d00f8e1f07fdaee04c720.png'
const tableHeaderStyle = ref({
    color: "black"
})
let orgName = ref("江苏省工商银行")
let channel = ref("")
let channelList = ref([{ label: "江苏铭漫", value: 1 }])
const value2 = ref([])
const options = [
    {
        value: '1',
        label: '件均金额',
    },
    {
        value: '2',
        label: '通过率',
    },
    {
        value: '3',
        label: '逾期率',
    },
    {
        value: '4',
        label: '不良率',
    },
    {
        value: '5',
        label: '放款总额',
    }, {
        value: '6',
        label: '申请时长均值',
    }, {
        value: '7',
        label: '某页面停留',
    },
]
const table = ref([
{"变量字段":"通过率","徐州某力":78,"苏州某发":87,"马鞍山某达":72,"合肥某鑫":84,"南京某漫":75,"无锡某万":81,"常州某车":73,"蚌埠某多":71},
{"变量字段":"逾期率","徐州某力":2.4,"苏州某发":2.47,"马鞍山某达":2.37,"合肥某鑫":2.5,"南京某漫":2.4,"无锡某万":2.37,"常州某车":2.33,"蚌埠某多":2.33},
{"变量字段":"不良率","徐州某力":0.81,"苏州某发":0.93,"马鞍山某达":0.8,"合肥某鑫":0.88,"南京某漫":0.83,"无锡某万":0.94,"常州某车":0.81,"蚌埠某多":0.79},
{"变量字段":"申请时长均值","徐州某力":123,"苏州某发":157,"马鞍山某达":149,"合肥某鑫":121,"南京某漫":108,"无锡某万":189,"常州某车":153,"蚌埠某多":164},
{"变量字段":"某页面停留时长均值","徐州某力":8.3,"苏州某发":8.3,"马鞍山某达":7.7,"合肥某鑫":8.5,"南京某漫":7.8,"无锡某万":7.8,"常州某车":7.2,"蚌埠某多":7.8},
{"变量字段":"跳出次数均值","徐州某力":1.2,"苏州某发":1.23,"马鞍山某达":1.16,"合肥某鑫":1.23,"南京某漫":1.1,"无锡某万":1.24,"常州某车":1.18,"蚌埠某多":1.25},
{"变量字段":"年龄均值","徐州某力":36.4,"苏州某发":35.2,"马鞍山某达":34.4,"合肥某鑫":36.4,"南京某漫":31.2,"无锡某万":37.2,"常州某车":34,"蚌埠某多":34},
{"变量字段":"男性占比","徐州某力":0.57,"苏州某发":0.68,"马鞍山某达":0.74,"合肥某鑫":0.53,"南京某漫":0.86,"无锡某万":0.75,"常州某车":9.67,"蚌埠某多":0.66},
{"变量字段":"平均车龄","徐州某力":5.67,"苏州某发":6.07,"马鞍山某达":5.4,"合肥某鑫":6.2,"南京某漫":5.33,"无锡某万":5.53,"常州某车":5.2,"蚌埠某多":5.67},
{"变量字段":"放款总额","徐州某力":7360,"苏州某发":7280,"马鞍山某达":6400,"合肥某鑫":7520,"南京某漫":6800,"无锡某万":7680,"常州某车":6880,"蚌埠某多":7120},
{"变量字段":"平均车价","徐州某力":11.7,"苏州某发":12.75,"马鞍山某达":12.45,"合肥某鑫":13.65,"南京某漫":12,"无锡某万":14.25,"常州某车":11.4,"蚌埠某多":11.85},
{"变量字段":"件均放款金额","徐州某力":8.2,"苏州某发":9.2,"马鞍山某达":7.9,"合肥某鑫":9.1,"南京某漫":7.8,"无锡某万":8.3,"常州某车":7.5,"蚌埠某多":8.2},
{"变量字段":"件均贷款比例","徐州某力":7,"苏州某发":7.5,"马鞍山某达":7.1,"合肥某鑫":7.4,"南京某漫":7.1,"无锡某万":7.1,"常州某车":7,"蚌埠某多":7.7}

])
const clearable = () => {
    channel.value = ""
    value2.value = ""
}
</script>
<style scoped="scss">
.search {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-left: 40px;


    .search-obj {
        margin-left: 80px;
        margin-top: 40px;
        width: 400px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-self: center;

        .title {
            width: 200px;
            align-content: center;
            text-align: end;
            margin-right: 10px;
        }
    }

    .search-obj-other {
        display: flex;
        flex-direction: row;
        margin-top: 40px;
        margin-left: 2%;

        .title {
            width: 200px;
            align-content: center;
            text-align: end;
            margin-right: 10px;
        }
    }

}

.submit {
    margin-left: 88%;
}

.el-divider {
    margin-top: 40px;
}

.container {
    display: flex;
    flex-direction: row;
    margin-bottom: 10rem;

    .table {
        margin-top: 80px;
        margin-left: 20px;
        width: 50%;
        height: 800px;
        overflow: auto;
    }

}
</style>